<script setup>
import { ref } from 'vue'
import { useDMStore } from '@/store/super-manger/dormitoryMangerStore'
import { storeToRefs } from 'pinia';
import { deleteDMInfosApi, updateStatusApi } from '@/service/dormitory-manger'
import { EditPen, Delete } from '@element-plus/icons-vue'
import { useCommonStore } from '@/store/commonStore'
import EditPanel from './edit-panel.vue'
import { formatTime } from '@/utils/formatTime'
import eventBus from '@/utils/eventBus'
import { showElMessage, showNotifyTip } from '@/utils/showTipMessage'

const { 
  isShowTipInfo, 
  isShowDMEditPanel, 
  tipInfoContent,
  oplationId,
  oplationType 
} = storeToRefs(useCommonStore());

const dmStore = useDMStore();
const { tableData, selectionIds } = storeToRefs(dmStore);
const rowId = ref(-1);  // 操作当前行的id值
const tableHeaderStyle = {  // 表头样式
  background: '#f5f7f6',
  height: '50px'
}
const isDMEdit = ref(false);  // 是否显示编辑面板
// 操作按钮数据
const btns = ref([
  {
    type: 'edit',
    text: '编辑'
  },
  {
    type: 'danger',
    text: '删除'
  },
])

// 操作按钮
const optionsBtnClick = async(index, row) => {
  if (index === 1) {  // 表示删除
    isShowTipInfo.value = true;
    tipInfoContent.value = '删除后将无法恢复，确定删除该信息记录吗？'
    oplationId.value = row.id;
    oplationType.value = 'delete';  // 保存类型
    return;
  }
  // 表示编辑
  isShowDMEditPanel.value = true
  rowId.value = row.id;
}

eventBus.on('deleteBtnClick', async function() {
  const res = await deleteDMInfosApi(oplationId.value);  // 调用删除api
  if (res.data.code === 1) {  // 表示删除成功
    showElMessage("删除成功");
  }
})

const handleSelectionChange = (value) => {
  selectionIds.value = [];  // 将数组清空
  for (let val of value) {
    selectionIds.value.push(val.id);  // 将选中的id值存储到store当中
  }
}

// 启用按钮点击
const updateStatus = async(row, value) => {
  const { id, name } = row;
  // 发送网络请求修改状态值
  const res = await updateStatusApi(id, value);
  if (res.data.code) {
    let message = '';
    if (value) {
      message = `宿管【${name}】启用成功！`
    } else {
      message = `宿管【${name}】停止使用！`
    }
    showNotifyTip(message);
  }
}

</script>

<template>
  <div class="dormitory_manger_cpn">
    <el-table 
        :data="tableData" 
        style="width: 100%" 
        border
        :header-cell-style="tableHeaderStyle"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
        stripe
    >
    <el-table-column 
      type="selection" 
      width="55" 
      fixed 
    />
    <el-table-column label="序号" type="index" width="55" />
    <el-table-column label="头像" width="100">
        <template #default="prop">
            <el-avatar shape="square" :src="prop.row.avatorUrl" />
        </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"/>
    <el-table-column prop="id" label="宿管编号" width="180"/>
    <el-table-column prop="gender" label="性别" width="55"/>
    <el-table-column prop="phone_number" label="手机号" width="200"/>
    <el-table-column prop="username" label="账号" width="180"/>
    <el-table-column prop="password" label="密码" width="180"/>
    <el-table-column label="管理楼栋" width="150">
        <template #default="prop">
            <span v-if="prop.row.building === 0">待分配</span>
            <span v-else>{{ prop.row.building }} 号楼</span>
        </template>
    </el-table-column>
    <el-table-column label="状态" width="100">
        <template #default="prop">
          <el-tag 
              class="ml-2" 
              :type="prop.row.status ? 'success': ''"
            >
              {{ prop.row.status ? '启用中...' : '待启用' }}
            </el-tag>
        </template>
    </el-table-column>
    <el-table-column label="入 / 离职时间" width="200">
      <template #default="prop">
        <span>{{ formatTime(prop.row.time) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="250" #default="scoped">
        <!-- 操作按钮 -->
        <el-button 
            v-if="!scoped.row.status" 
            plain 
            type="primary" 
            size="small"
            @click="updateStatus(scoped.row, 1)"
          >启用</el-button>
          <el-button 
            v-else-if="scoped.row.status" 
            plain 
            type="danger" 
            size="small"
            @click="updateStatus(scoped.row, 0)"
            :disabled="scoped.row.status && scoped.row.building"
          >停用</el-button>
        <template v-for="(item, index) of btns" :key="index">
          <el-button 
            :type="item.type" 
            plain 
            size="small" 
            @click="optionsBtnClick(index, scoped.row)"
            :disabled="index && scoped.row.status"
          >
            <el-icon>
              <EditPen v-if="!index" />
              <Delete v-else/>
            </el-icon>
            {{ item.text }}
          </el-button>
        </template> 
    </el-table-column>
    </el-table>
    <!-- 编辑面板 -->
    <edit-panel :isShowEditPanel="isDMEdit" :id="rowId" />
  </div>
</template>

<style scoped lang="less">
.dormitory_manger_cpn {
  position: relative;
  .DmEdit {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    z-index: 11;
  }
}
</style>